<template>
	<view class="personal-center">
		<!-- 个人信息区域 -->
		<view class="user-info">
			<view class="user-img">
				<image :src="userImgUrl" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<view class="user-name">{{nickname}}</view>
				<view class="edit-btn" @click="handleEditClick">编辑</view>
			</view>
		</view>

		<!-- 数据卡片区域 (Grid布局) -->
		<view class="data-cards-grid">
			<view class="card">
				<view class="card-img">
					<image src="https://img.js.design/assets/img/68dd1f47ba276a0e8adb674d.png"></image>
				</view>
				<view class="card-data">
					<view class="card-value">
						<text class="left">0</text>
						<text class="right">元</text>
					</view>
					<view class="card-label">账户余额</view>
				</view>
			</view>

			<view class="card">
				<view class="card-img">
					<image src="https://img.js.design/assets/img/68dd1f40ba276a0e8adb674a.png"></image>
				</view>
				<view class="card-data">
					<view class="card-value">
						<text class="left">0</text>
						<text class="right">张</text>
					</view>
					<view class="card-label">优惠券</view>
				</view>
			</view>

			<view class="card">
				<view class="card-img">
					<image src="https://img.js.design/assets/img/68dd1f3b37bf0cc7b93db855.png"></image>
				</view>
				<view class="card-data">
					<view class="card-value">
						<text class="left">2</text>
						<text class="right">笔</text>
					</view>
					<view class="card-label">历史订单</view>
				</view>
			</view>
		</view>

		<!-- 功能选项区域 -->
		<view class="function-list">
			<view class="function-item">
				<view class="function-img">
					<image src="https://img.js.design/assets/img/68dd1f38b5e8b987e55c97d2.png"></image>
				</view>
				<view class="function-text">个人资料</view>
				<view class="function-badge to-right">5项待完善</view>
				<uni-icons type="right" size="18" class="arrow-icon"></uni-icons>
			</view>
			<view class="function-item">
				<view class="function-img">
					<image src="https://img.js.design/assets/img/68dd1f373f22157da6a6791d.png"></image>
				</view>
				<view class="function-text">个人认证</view>
				<view class="function-badge to-right">去认证</view>
				<uni-icons type="right" size="18" class="arrow-icon"></uni-icons>
			</view>
			<view class="function-item">
				<view class="function-img">
					<image src="https://img.js.design/assets/img/68dd1f34d56431f9d689ee51.png"></image>
				</view>
				<view class="function-text">我的关注</view>
				<uni-icons type="right" size="18" class="arrow-icon to-right"></uni-icons>
			</view>
			<view class="function-item">
				<view class="function-img">
					<image src="https://img.js.design/assets/img/68dd1f3240d5d2a02eb14ab5.png"></image>
				</view>
				<view class="function-text">黑名单管理</view>
				<uni-icons type="right" size="18" class="arrow-icon to-right"></uni-icons>
			</view>
			<view class="function-item">
				<view class="function-img">
					<image src="https://img.js.design/assets/img/68dd1f3037bf0cc7b93db81f.png"></image>
				</view>
				<view class="function-text">获取帮助</view>
				<uni-icons type="right" size="18" class="arrow-icon to-right"></uni-icons>
			</view>
			<view class="function-item" @click="gotoSettingsPage">
				<view class="function-img">
					<image src="/static/set.png"></image>
				</view>
				<view class="function-text">设置</view>
				<uni-icons type="right" size="18" class="arrow-icon to-right"></uni-icons>
			</view>
		</view>

		<view class="out-login">
			<button @click="logout">退出登录</button>
		</view>

	</view>
	
	<custom-tabbar></custom-tabbar>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";

	// 导入 onShow 生命周期函数
	import {
		onShow
	} from '@dcloudio/uni-app';

	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js';

	import {
		convertCloudUrl
	} from "@/utils/common.js";

	// 昵称
	const nickname = ref("");
	// 头像
	const userImgUrl = ref("");

	const userInfo = computed(() => store.userInfo);
	nickname.value = userInfo.value.nickname;

	const avatarFile = computed(() => store.userInfo.avatar_file);
	userImgUrl.value = avatarFile.value === undefined || avatarFile.value === null ? "/static/defAvatar.png" :
		convertCloudUrl(avatarFile.value.url);

	/**
	 * 跳转编辑页面
	 */
	const handleEditClick = () => {
		uni.navigateTo({
			url: "/pages/personal-center/user-info"
		})
	}

	/**
	 * 跳转设置页面
	 */
	const gotoSettingsPage = () => {
		uni.navigateTo({
			url: "/pages/personal-center/settings"
		})
	}

	/**
	 * 退出登录
	 */
	const logout = () => {
		mutations.logout();
	}

	// 页面显示时触发（包括从其他页面回退回来）
	onShow(() => {
		// 刷新昵称
		nickname.value = userInfo.value.nickname;
		// 刷新头像
		userImgUrl.value = avatarFile.value === undefined || avatarFile.value === null ? "/static/defAvatar.png" :
			convertCloudUrl(avatarFile
				.value.url);
	});
</script>

<style lang="scss" scoped>
	.personal-center {
		min-height: 100vh;
		background-color: #FAFAFA;
		padding: 0 60rpx;

		.user-info {
			display: flex;
			align-items: center;
			// margin: 50rpx 0;
			padding: 50rpx 0;

			.user-img {
				margin-right: 46rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}

			.user-details {
				display: flex;
				align-items: center;

				.user-name {
					font-family: 'Inter-Regular';
					font-weight: 700;
					font-size: 44rpx;
					color: rgba(74, 74, 74, 1);
				}

				.edit-btn {
					display: flex;
					margin-left: 14rpx;
					font-family: 'Inter-Regular';
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(133, 133, 133, 1);
					width: 90rpx;
					height: 40rpx;
					align-items: center;
					justify-content: center;
					border-radius: 25rpx;
					background-color: rgba(237, 237, 237, 1);
				}
			}
		}

		.data-cards-grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 30rpx;

			.card {
				background-color: #FEFEFE;
				border-radius: 56rpx;
				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

				.card-img {
					margin-top: 12rpx;
					margin-left: 16rpx;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.card-data {
					margin-top: 30rpx;
					margin-left: 36rpx;
					margin-bottom: 40rpx;
					display: flex;
					flex-direction: column;

					.card-value {
						.left {
							font-size: 48rpx;
							color: rgba(18, 18, 18, 1);
							font-weight: 700;
						}

						.right {
							margin-left: 8rpx;
							font-size: 24rpx;
							color: rgba(47, 47, 47, 1);
							font-weight: 500;
						}
					}

					.card-label {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: rgba(76, 75, 76, 1);
					}
				}
			}

		}

		.function-list {
			margin-top: 30rpx;

			.function-item {
				display: flex;
				padding: 40rpx 0;
				align-items: center;

				.function-img {
					margin-right: 40rpx;

					image {
						display: block;
						width: 36rpx;
						height: 36rpx;
					}
				}

				.function-text {
					font-size: 32rpx;
				}

				.function-badge {
					font-size: 30rpx;
					color: rgba(181, 181, 181, 1);
				}

				::v-deep .arrow-icon {
					color: #B3B3B3;
				}

				.to-right {
					margin-left: auto;
				}
			}
		}

		.out-login {
			margin-top: 30rpx;
		}
	}
</style>